<template>
  <TopBar></TopBar>
  <div style="height: 100%; display: flex">
    <vertical :same-menu-activ="sameMenuActiv" @evt_menu_click="evt_menu_click"></vertical>
    <!--组件显示,在嵌入模式下父div高度100%,非嵌入模式下div高度(100% - 95px)-->
    <div :class="{ 'index-component': 1, 'index-isNotMicroApp': !microAppData }">
      <TabPane :tabs="Tabs" :same-menu-activ="sameMenuActiv" @evt_select="evt_select"></TabPane>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { ref, nextTick, onMounted, defineAsyncComponent, defineComponent, reactive, toRefs, watch } from 'vue'
import { DownOutlined, SearchOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import qs from 'qs'
import vertical from './components/vertical'
import horizontal from './components/horizontal'
import TabPane from './components/TabPane'
import TopBar from './components/TopBar'

import { storeToRefs } from 'pinia'
import { useStoreLogin } from '@/pinia/login'
import { useStoreMenu } from '@/pinia/menuList'

import { useRouter } from 'vue-router'

export default {
  name: 'MainIndex',
  components: { vertical, TabPane, TopBar },
  setup(props) {
    const StoreMenu = useStoreMenu()

    //临时获取token, 调试接口
    let data = {
      client_id: 'testClient1',
      client_secret: 'testSecret1',
      grant_type: 'password',
      username: '9150844',
      password: 'd9573292792bb197',
    }
    let data1 = qs.stringify(data)
    factory.getToken(data1).then((res) => {
      localStorage.setItem('token', res.data.access_token)
    })
    // localStorage.setItem('token', '')

    /**获得菜单,头像等*/
    onMounted(() => {
      // getInitData()
    })

    async function getInitData() {
      let fm
      fm = { Info: null, _model: 'Account', _cmd: 'Check' }
      const userInfo = await factory.getMenu(useStoreLogin().cookie, qs.stringify(fm))
      fm = { _model: 'Proxy', _cmd: 'App' }
      const userMenu = await factory.getMenu(useStoreLogin().cookie, qs.stringify(fm))
    }

    //==菜单按钮以及标签页管理==============================================
    let routes = useRouter()
    let arrMn = []
    routes.options.routes.forEach((m) => {
      if (!m.meta.isHidden) {
        let title = m.meta.title
        let isSingle = m.meta.isSingle
        let menu = []
        if (isSingle) {
          menu.push({ label: title, path: m.path })
        } else {
          if (m.children && m.children.length) {
            m.children.forEach((item) => {
              menu.push({ label: item.meta.title, path: item.path })
            })
          }
        }
        arrMn.push({ title, isSingle, menu, path: m.path })
      }
    })
    const menuList = arrMn
    console.log('手风琴菜单', menuList)
    StoreMenu.reGet(menuList)
    //菜单点击
    setTimeout(() => {
      addTab(4, 0)
    }, 1000)
    const evt_menu_click = (item) => {
      addTab(item.index, item.index1)
    }
    const sameMenuActiv = ref('')
    const addTab = (index, index1) => {
      StoreMenu.x = index
      StoreMenu.y = index1
      console.log('当前页面', index, index1, StoreMenu.current_select)
      sameMenuActiv.value = StoreMenu.current_select.label
      //标签卡片记录
      let arr = Tabs.value.filter((item) => item.ele.label === StoreMenu.current_select.label)
      if (!arr.length) {
        Tabs.value.push({ x: index, y: index1, ele: StoreMenu.current_select })
      }
      routes.push({ path: StoreMenu.current_select.path })
    }

    //==卡片标签页===============================================
    const Tabs = ref([])
    const evt_select = (obj) => {
      addTab(obj.x, obj.y)
    }

    //==当被其他门户嵌入时==============================================
    const microAppData = ref(window.microApp ? window.microApp.getData() : '') // 返回基座下发的data数据
    const componentList = ref([])
    if (microAppData.value) {
      console.log('收到基座的数据', microAppData.value)
      componentList.value = microAppData.value.components
    }
    return {
      StoreMenu,
      addTab,
      microAppData,
      componentList,
      Tabs,
      evt_select,
      evt_menu_click,
      sameMenuActiv,
    }
  },
}
</script>

<style scoped lang="less">
.index-header {
  height: 50px;
  color: #ffffff;
  background: #282c34;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;

  .title {
    margin: 5px 15px;
    display: flex;
    align-content: center;
    align-items: center;

    img {
      width: 30px;
      height: 30px;
      margin-right: 5px;
    }

    span {
      color: white;
      font-weight: bold;
      line-height: 20px;
    }
  }

  .index-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user {
      height: 30px;
      margin-right: 25px;
      display: flex;
      align-items: center;
    }
  }

  .index-header-menu {
    display: flex;
    align-items: center;
    justify-content: right;

    .category-views {
      height: 32px;
      min-width: 79px;
      border-radius: 8%;
      box-sizing: border-box;
      display: flex;
      margin-right: 10px;
      justify-content: center;
      align-items: center;
    }
  }

  .category-color {
    background-color: rgb(91, 107, 238);
  }

  .ant-dropdown-link {
    width: 100%;
    color: white;
    text-align: center;
  }
}

.index-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.index-isNotMicroApp {
  height: calc(100% - 50px);
}
</style>
